import React from 'react';
import styles from './listexam.less';
import '../../../../src/global.css';
// import Xiala from '../../../component/xiala';
import { Select, Button, Table, Space, Form } from 'antd';
const { Option } = Select;
import { SearchOutlined } from '@ant-design/icons';
import { useSelector, ExamModelState, useDispatch } from 'umi';
import { useEffect } from 'react';

let Listexam: React.FC = function () {
  let dispatch = useDispatch();
  //获取试卷列表
  useEffect(() => {
    dispatch({
      type: 'exam/getListexam',
    });
  }, []);
  //获取所有的考试类型
  useEffect(() => {
    dispatch({
      type: 'exam/getExamtype',
    });
  }, []);
  //获取所有的课程
  useEffect(() => {
    dispatch({
      type: 'exam/getExamsubject',
    });
  }, []);
  let { listexam, examType, examsubject } = useSelector(
    (model: { exam: ExamModelState }) => model.exam,
  );
  console.log(listexam);
  console.log(examType);
  console.log(examsubject);
  const { Column, ColumnGroup } = Table;
  const onFinish = (values: any) => {
    console.log(values);
    dispatch({
      type: 'exam/getExamquestions',
      payload: { ...values },
    });
  };
  console.log(listexam);
  return (
    <div className={styles.title}>
      <div className={styles.Top}>
        <h1 className={styles.head}>试卷列表</h1>
      </div>
      <div className={styles.nav}>
        <Form name="basic" onFinish={onFinish} className={styles.searchs}>
          <div className={styles.types}>
            <span>考试类型:</span>
            {examType.length && (
              <Form.Item name="exam_id" className={styles.Types}>
                <Select style={{ width: 200 }}>
                  {examType.map((item: any) => (
                    <Option value={item.exam_id} key={item.exam_id}>
                      {item.exam_name}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            )}
          </div>
          <div className={styles.subjects}>
            <span>课程:</span>
            {examsubject.length && (
              <Form.Item name="subject_id" className={styles.Subjects}>
                <Select style={{ width: 200 }}>
                  {examsubject.map((item: any) => (
                    <Option value={item.subject_id} key={item.subject_id}>
                      {item.subject_text}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            )}
          </div>
          <div className={styles.btns}>
            <Form.Item className={styles.Btns}>
              <Button
                type="primary"
                icon={<SearchOutlined />}
                htmlType="submit"
              >
                查询
              </Button>
            </Form.Item>
          </div>
        </Form>
      </div>
      <div className={styles.content}>
        <Table dataSource={listexam}>
          <Column title="试卷信息" dataIndex="title" key="title" />
          <Column title="班级" dataIndex="grade_name" key="grade_name" />
          <Column title="创建人" dataIndex="user_name" key="user_name" />
          <Column title="开始时间" dataIndex="start_time" key="start_time" />
          <Column title="结束时间" dataIndex="end_time" key="end_time" />
          <Column
            title="操作"
            key="action"
            render={(text, record: any) => (
              <Space size="middle">
                <a>Delete</a>
              </Space>
            )}
          />
        </Table>
      </div>
    </div>
  );
};
export default Listexam;
